<template>
  <div class="page-wrap">
    <div class="page-title">CdsTagGroup</div>
    <div class="page-sub-title">基础用法</div>
    <div>
      <CdsStatus type="running" isFontColor style="margin-right: 20px">正常</CdsStatus>
      <CdsStatus type="error" isFontColor style="margin-right: 20px">错误</CdsStatus>
      <CdsStatus type="deleting" isFontColor style="margin-right: 20px">删除中</CdsStatus>
      <CdsStatus type="stop" isFontColor style="margin-right: 20px">关闭</CdsStatus>
    </div>
    <div style="margin-top: 20px;">
      <CdsStatus type="running"  style="margin-right: 20px">正常</CdsStatus>
      <CdsStatus type="error"  style="margin-right: 20px">错误</CdsStatus>
      <CdsStatus type="deleting"  style="margin-right: 20px">删除中</CdsStatus>
      <CdsStatus type="stop" isFontColor style="margin-right: 20px">关闭</CdsStatus>
    </div>
    <div style="margin-top: 20px;">
      <CdsStatus type="running"  isFontColor :isIcon="false" style="margin-right: 20px">正常</CdsStatus>
      <CdsStatus type="error" isFontColor :isIcon="false" style="margin-right: 20px">错误</CdsStatus>
      <CdsStatus type="deleting" isFontColor :isIcon="false" style="margin-right: 20px">删除中</CdsStatus>
      <CdsStatus type="stop" isFontColor :isIcon="false" style="margin-right: 20px">关闭</CdsStatus>
    </div>
    <highlightjs
      language="shell"
      :code="code"
    />
    <div class="page-sub-title">Attributes</div>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="field"
        label="参数">
      </el-table-column>
      <el-table-column
        prop="desc"
        label="说明">
      </el-table-column>
      <el-table-column
        prop="type"
        label="类型">
      </el-table-column>
      <el-table-column
        prop="available"
        label="可选值">
      </el-table-column>
      <el-table-column
        prop="default"
        label="默认值">
      </el-table-column>
    </el-table>
  </div>
  
</template>

<script setup>
import {CdsStatus} from 'cds-ui-business-components'

const code = `
<template>
    <div>
      <CdsStatus type="running" isFontColor >正常</CdsStatus>
      <CdsStatus type="error" isFontColor >错误</CdsStatus>
      <CdsStatus type="deleting" isFontColor >删除中</CdsStatus>
      <CdsStatus type="stop" isFontColor >关闭</CdsStatus>
    </div>
    <div style="margin-top: 20px;">
      <CdsStatus type="running"  >正常</CdsStatus>
      <CdsStatus type="error"  >错误</CdsStatus>
      <CdsStatus type="deleting"  >删除中</CdsStatus>
      <CdsStatus type="stop" isFontColor >关闭</CdsStatus>
    </div>
    <div style="margin-top: 20px;">
      <CdsStatus type="running"  isFontColor :isIcon="false" >正常</CdsStatus>
      <CdsStatus type="error" isFontColor :isIcon="false" >错误</CdsStatus>
      <CdsStatus type="deleting" isFontColor :isIcon="false" s>删除中</CdsStatus>
      <CdsStatus type="stop" isFontColor :isIcon="false" >关闭</CdsStatus>
    </div>
</template>
`

const tableData = [
  {field: 'type', desc: '状态类型', type: 'string', available: 'ok, running, normal,creating, updating, configuring binding, operating, matching, unmatching, deleting, wait_delete, down, deleted, part_error,error, expired_error, ban....', default: '--'},
  {field: 'isIcon', desc: '是否显示power 图标', type: 'Boolean', available: 'true/false', default: 'true'},
  {field: 'isFontColor', desc: '文字颜色是否与icon相同', type: 'Boolean', available: 'true/false', default: 'false'},
]
</script>

<style scoped>

</style>
